<template>
  <div class="login-account">
    <!-- relus是为了绑定规则 model是为了能实时拿到accout里面的值（响应式） -->
    <el-form label-width="80px" :rules="rules" :model="account" ref="formRef">
      <el-form-item label="账号：" prop="name">
        <el-input type="text" v-model="account.name" placeholder="coderwhy" />
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input
          type="password"
          v-model="account.password"
          show-password
          placeholder="123456"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
// 代码抽取时，如果涉及到ref/reactive/useStore/onMounted 等这些响应或者钩子 就需要抽取到hook里面
// 没有涉及到上面那些的就抽取到 config文件里面就行
import { rules } from "../config/account-config"; //导入抽取出去的规则
import { ElForm } from "element-plus";
import localCache from "@/utils/cache";
import { useStore } from "vuex";

export default defineComponent({
  components: {},
  setup() {
    const store = useStore();
    // 1、定义响应式的对象 （用户名与密码对象）
    const account = reactive({
      name: localCache.getCache("name") ?? "",
      password: localCache.getCache("password") ?? "",
    });

    //2、定义el-form组件对应的 值对象
    // InstanceType<typeof object> => 返回一个拥有构造函数的实例
    const formRef = ref<InstanceType<typeof ElForm>>();
    //3、执行登录方法
    const loginAction = (isKeepPassword: boolean) => {
      console.log("action object");
      // formRef.value.validate 拿到的就是是否验证通过的判断 （返回值是boolean类型）
      formRef.value?.validate((valid) => {
        // console.log(valid);
        if (valid) {
          console.log("开始登录中...");
          // 1.是否需要缓存
          if (isKeepPassword) {
            localCache.setCache("name", account.name);
            localCache.setCache("password", account.password);
            localCache.setCache("isKeepPassword", isKeepPassword);
          } else {
            localCache.deleteCache("name");
            localCache.deleteCache("password");
            localCache.deleteCache("isKeepPassword");
          }
          // 2.开始进行登录验证
          // 登录的逻辑移交到vuex里面完成
          store.dispatch("loginModule/accountLoginAction", { ...account });
        }
      });
    };

    return {
      account,
      //template里面能用的只有 data,computed,prop有的 或 setup里面return的对象,里面
      rules, //要在这里把rules return出去，这样在模板上面才能使用rules
      loginAction,
      formRef,
    };
  },
});
</script>

<style scoped lang="less">
.login-account {
  width: 100%;
  height: 100%;

  .el-form-item {
    display: flex;
  }
}
</style>
